<template>
    <div>
      <el-dialog
          width="1500px"
          top="10vh"
          :close-on-click-modal="false"
          :visible.sync="performanceDialogVisible"
          class="printDialog"
          @close="closeDialog"
      >
        <div id="card"  ref="printHtml">
          <div id="cardWrap" class="cardWrap">
            <div  class="cardContain" >
              <h2 style="text-align: center; margin-bottom: 10px">张家界航空工业职业技术学院</h2>
              <h3 style="text-align: center;">2023年考试成绩查询</h3>
              <div v-if="isuser"  class="box-performance">

                <div  class="box-right">

                  <div class="newuser">
                    <div>
                      <span>姓名：</span>
                      <span>{{newUserPList.nickname}}</span>
                    </div>
                    <div>
                      <span>身份证号：</span>
                      <span>{{newUserPList.idCard}}</span>
                    </div>
                  </div>
                  <div class="per">
                    <div>
                      <span class="text">文化成绩：</span>
                      <span class="number">{{newUserPList.cultureGrade}}</span>
                    </div>
                    <div>
                      <span class="text">技能成绩：</span>
                      <span class="number">{{newUserPList.skillGrade}}</span>
                    </div>
                    <div>
                      <span class="text">总分：</span>
                      <span class="number">{{newUserPList.totalPoints}}</span>
                    </div>
                    <div class="majorName" >
                      <span class="text">专业：</span>
                      <span class="number" > <span v-show="userdialogVisible">{{newUserPList.majorName}}</span></span>
                    </div>
                  </div>

                  <div class="rk">
                    <span> {{newUserPList.remark}}</span>
                  </div>
                </div>

              </div>
                <div v-else class="zw">
                <span>暂无成绩</span>
              </div>
            </div>
          </div>
        </div>

        <el-row class="dialog__footer dialog-footer-btn but-box">
          <el-col class="b-box">
            <el-button type="danger" @click="closeDialog()">关闭</el-button>
          </el-col>
        </el-row>
      </el-dialog>

    </div>
</template>

<script>

import {getPdf} from "@/utils/exportPdf";
import {admissionGetById} from "@/request/utils/admission";
import {newUserGetByIdCard, newUserGetByNumber, newUserUpdate} from "@/request/utils/user";

export default {
  name: "admission-card",
  props:['performanceDialogVisible','userIdCArd'],
  data() {
    return {
      userAdmission: {},
      newUserPList: {},
      islq: true,
      num1:'',
      num2:'',
      isuser: true,
      userdialogVisible: false,
    }
  },
  //计算属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {

  },
  //方法集合
  methods: {
    examPrint() {
        //发送请求请求成绩
      this.userAdmission = JSON.parse(localStorage.getItem("zjjuser"));
      // this.getNewUser(this.userAdmission.idCard)
      console.log("number",this.userAdmission.number)
      this.getNumberUser(this.userAdmission.number)
    },
    closeDialog(){
      this.$emit("closePerformance");
    },
    getNewUser(idCard){
      newUserGetByIdCard(idCard).then(res=>{
        if(res.code===0){
          this.newUserPList = res.data;
          this.islq = true
          this.userdialogVisible = false;
        }else {
          this.islq = false
          this.userdialogVisible = true;
        }
      })
    },
    getNumberUser(number){
      newUserGetByNumber(number).then(res=>{
        if(res.code===0){
          if(res.data!==null){
            this.newUserPList = res.data;
            this.userdialogVisible = this.newUser.isEnroll==="是";
            this.isuser = true
          }else {
            this.isuser = false
          }
          this.islq = true;
        }else {
          this.islq = false
          this.userdialogVisible = true;
        }
      })
    },
    setisgo(flag){
      if(flag===this.newUserPList.isGo){
        this.$message({
          message: '不需要修改',
          type: 'error',
          duration: 1500,

        })
      }else {

        const loading = this.$loading({
          lock: true,
          text: '查询您的信息中~',
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.8)'
        });
        setTimeout(() => {
          this.newUserPList.isGo = flag;
          newUserUpdate(this.newUserPList).then(res=>{
            if(res.code===0){
              this.$message({
                message: '修改成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getNewUser(this.userAdmission.idCard)
                }
              })
            }
          })
          loading.close();
        }, 2000);

      }

    }


  },
  //生命周期 一 创建完成(可以访问当前this实例)
  created() {
    this.examPrint();
  },
  //生命周期 一 挂载完成(可以访问DOM元素)
  mounted() {

  },
  //生命周期 - 创建之前
  beforeCreate() {
  },
  //生命周期 - 挂载之前
  beforeMount() {
  },
  //生命周期 - 更新之前
  beforeUpdate() {

    const loading = this.$loading({
      lock: true,
      text: '查询您的信息中~',
      spinner: 'el-icon-loading',
      background: 'rgba(255, 255, 255, 0.8)'
    });
    setTimeout(() => {

      loading.close();
    }, 1000);
  },
  //生命周期 - 更新之后
  updated() {
  },
  //生命周期 - 销毁之前
  beforeDestroy() {
  },
  //生命周期 - 销毁完成
  destroyed() {
  },
  //如果页面有keep-alive缓存功能，这个函数会触发
  activated() {
  },
}
</script>

<style scoped lang="less">

.zw{
  width: 300px;
  height: 200px;
  margin: 0 auto;
  line-height: 200px;
  text-align: center;
  font-size: 50px;
  span{
    font-weight: 800;
    color: #999;
  }
}

.cardContain{
  margin: 0 auto;
  h2{
    font-size: 45px;
  }
  h3{
    font-size: 30px;
    margin-bottom:30px;
  }
  .pttb{

    margin: 0 auto;
  }
}
.but-box{
  margin-top: 50px;
  display: flex;
  justify-content: center;
  .b-box{
    display: flex;
    justify-content: center;

  }
}
p{
  color: black;
  font-weight: 800;
}
#card{
  height: 600px;
  font-size: 16px;
}



.box-performance{
  height: 500px;
  width: 100%;
  margin-top: 40px;
  display: flex;
  justify-content: space-around;
  text-align: center;

  .advice-note{
    display: flex;
    position: relative;
    width: 700px;
    height: 500px;
    .advice-note-image{
      width: 700px;
      height: 500px;
      img{
        width: 100%;
        height: 100%;
      }
    }

    .advice-note-text{
      position: absolute;
      width: 100%;
      height: 100%;
      font-size: 23px;
      font-weight: 800;
      color: black;

      .user-image{
        width: 120px;
        height: 170px;
        position: absolute;
        left: 35px;
        top: 50px;
        img{
          width: 100%;
          height: 100%;
        }
      }

      .text1{
        position: absolute;
        right: 370px;
        top: 43px;
      }
      .text2{
        position: absolute;
        right: 150px;
        top: 95px;
      }
      .text3{
        position: absolute;
        right: 350px;
        top: 143px;
      }
      .text4{
        position: absolute;
        right: 280px;
        top: 198px;
        span{
          margin-left: 50px;
        }
        .text4-ma-10{
          margin-left: 70px;
        }
      }
      .text5{
        position: absolute;
        left: 27px;
        bottom: 50px;
        font-size: 20px;
        span{
          margin-left: 30px;
        }
        .text5-ma-10{
          margin-left: 25px;
        }
      }
    }
  }


  .is-go{
    width: 400px;
    margin: 0 auto;
    .is-go-text{

      h4{
        color: red;
        font-size: 25px;
      }
      h5{
        margin-top: 20px;
        font-size: 20px;
        .yes-text{
          margin-left: 10px;
          color: green;
        }
        .no-text{
          margin-left: 10px;
          color: red;
        }
      }
    }
    .is-go-but{
      margin-top: 50px;
      display: flex;
      justify-content: space-between;
    }

  }

  .box-right{
    .newuser{
      width: 450px;
      margin: 30px auto;
      display: flex;
      justify-content: space-between;
      font-size: 20px;
    }
    .per{
      margin: 0 auto;
      width: 500px;
      height: 50%;
      div{
        margin-top: 40px;
        font-size: 25px;
        display: flex;
        justify-content: space-around;
        .text{
          text-align: right;
          width: 150px;
          color: #999;
        }
        .number{
          width: 150px;
          color: black;
        }
      }

    }

    //.majorName{
    //
    //  height: 50px;
    //  span{
    //    font-size: 18px;
    //    font-weight: 800;
    //    span{
    //      margin-left: 10px;
    //      color: red;
    //    }
    //  }
    //}
    .rk{
      margin-top: 50px;
      height: 50px;
      span{
        font-size: 20px;
        color: red;
      }

    }
  }

}

.default-box-p{
  height: 200px;
  width: 500px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  .default-box{
    width: 300px;
    margin: 0 auto;
      h2{

      }
  }
}


.dialogBox{
  display: flex;
  flex-direction:column;
  justify-content:center;
  text-align: center;
  width: 100%;
  h2{
    margin-top: 30px;
    color: red;
    font-size: 30px;
  }
  span{
    margin: 30px 0;
    font-size: 20px;
    display: inline-block;
  }

}


</style>